<template>
  <div class="Testimonials">
    <div class="content w wow animate__fadeInUp" data-wow-duration="1s">
      <Title :data="titleData" />
      <swiper :options="swiperOptions">
        <swiper-slide v-for="item in list" :key="item.id">
          <p>
            <span class="iconfont">&#xe68e;</span>
            {{ item.text }}
            <span class="iconfont">&#xe617;</span>
          </p>
          <img :src="require(`./images/testimonials-${item.id}.jpg`)" alt="" />
          <h3>John Larson</h3>
          <h4>Entrepreneur</h4>
        </swiper-slide>

        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
import Title from "../Title";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  components: {
    Title,
    Swiper,
    SwiperSlide,
  },
 
  data() {
    return {
      titleData: {
        title: "Testimonials",
        text: "Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.",
      },
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          bulletClass: "swiper-pagination-bullet",
          bulletActiveClass: "my-bullet-active",
        },
        slidesPerView: 3,
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
      },
      list: [
        {
          id: 1,
          text: "Proin iaculis purus consequat sem cure digni ssim donec porttitora entum suscipit rhoncus. Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen aliquam, risus at semper.",
        },
        {
          id: 2,
          text: "Export tempor illum tamen malis malis eram quae irure esse labore quem cillum quid cillum eram malis quorum velit fore eram velit sunt aliqua noster fugiat irure amet legam anim culpa.",
        },
        {
          id: 3,
          text: "Enim nisi quem export duis labore cillum quae magna enim sint quorum nulla quem veniam duis minim tempor labore quem eram duis noster aute amet eram fore quis sint minim.",
        },
        {
          id: 4,
          text: "Fugiat enim eram quae cillum dolore dolor amet nulla culpa multos export minim fugiat minim velit minim dolor enim duis veniam ipsum anim magna sunt elit fore quem dolore labore illum veniam.",
        },
        {
          id: 5,
          text: "Quis quorum aliqua sint quem legam fore sunt eram irure aliqua veniam tempor noster veniam enim culpa labore duis sunt culpa nulla illum cillum fugiat legam esse veniam culpa fore nisi cillum quid.",
        },
      ],
    };
  },
  mounted(){
    this.$wow.init()
  }
  
};
</script>

<style lang="less" >
.Testimonials {
  background-color: #f4f9fc;
  padding: 30px 0 60px;
  .swiper-slide {
    text-align: center;
    padding-bottom: 50px;
    p {
      margin: 0 15px 35px;
      padding: 20px;
      border-radius: 6px;
      box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
      position: relative;
      background-color: #fff;
      &::after {
        content: "";
        width: 0;
        height: 0;
        border-top: 20px solid #fff;
        border-right: 20px solid transparent;
        border-left: 20px solid transparent;
        position: absolute;
        bottom: -20px;
        left: calc(50% - 20px);
      }
      span {
        color: #d5e9f2;
      }
    }
    img {
      width: 90px;
      border-radius: 50%;
      margin: 0 auto;
    }
    h3 {
      font-size: 18px;
      font-weight: bold;
      margin: 10px 0 5px 0;
      color: #111;
    }
    h4 {
      font-size: 14px;
      color: #999;
      margin: 0;
    }
  }
}
.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  border: 1px solid #67b0d1;
  opacity: 1;
}
.my-bullet-active {
  background-color: #67b0d1;
}
</style>